<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>
<style>
    div {
        width: 420px;
        height: 340px;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        position: relative;
        /* border: 1px solid#000; */
        margin-left: 500px;
    }

    #btn {
        position: absolute;
        background: rgba(255, 255, 255, 0.411);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        bottom: 60px;
        left: 10px;
        border: none;
        font-size: 20px;
        z-index: 100;
        display: none;
    }

    i:first-child {
        padding-top: 5px;
        padding-left: 3px;
    }

    #btn1 {
        position: absolute;
        background: rgba(255, 255, 255, 0.411);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        bottom: 60px;
        left: 120px;
        border: none;
        font-size: 20px;
        z-index: 101;
        display: none;
    }

    #btn2 {
        position: absolute;
        background: rgba(255, 255, 255, 0.411);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        bottom: 60px;
        left: 70px;
        border: none;
        z-index: 100;
        font-size: 20px;
        display: none;
    }
    
</style>

<body>


    <div id="box">
        <button onmouseup="fun1()" id="btn2"><i class="glyphicon glyphicon-volume-up"></i></button>
        <button onmouseup="fun2()" id="btn1"><i class="glyphicon glyphicon-fast-forward"></i></button>
        <button onmouseup="fun()" id="btn"><i class="glyphicon glyphicon-play"></i></button>
        <video width="420" height="340" id="vid">
            <source id="sou" src="./WeChat_20220225191029.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            您的浏览器不支持 HTML5 video 标签。
        </video>
    </div>

</body>
<script>
    var box=document.getElementById('box')
    var video = document.getElementById("vid"); 
    var but = document.getElementById('btn')
    var but1=document.getElementById('btn1')
    var but2=document.getElementById('btn2')
    var i = 0
    box.onmouseover=function(){
        but.style.display='block'
        but1.style.display='block'
        but2.style.display='block'
    }
    box.onmouseout=function(){
        but.style.display='none'
        but1.style.display='none'
        but2.style.display='none'
    }
    
    function fun() {
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
        if (i == 0) {
            but.firstChild.setAttribute('class', 'glyphicon glyphicon-pause')
            i = 1
        } else {
            but.firstChild.setAttribute('class', 'glyphicon glyphicon-play')
            i = 0
        }
    }
    document.onkeydown = function () {
        if (event.keyCode == 32) {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
            if (i == 0) {
                but.firstChild.setAttribute('class', 'glyphicon glyphicon-pause')
                i = 1
            } else {
                but.firstChild.setAttribute('class', 'glyphicon glyphicon-play')
                i = 0
            }
        }
    }
    var k=0
    function fun1() {
        var sta = video.muted;
        if (sta == true) {
            video.muted = false;
        } else {
            video.muted = true;
        }
        if (k == 0) {
            but2.firstChild.setAttribute('class', 'glyphicon glyphicon-volume-off')
            k = 1
        } else {
            but2.firstChild.setAttribute('class', 'glyphicon glyphicon-volume-up')
            k = 0
        }
    }
    var list = ['http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', 'https://media.w3.org/2010/05/sintel/trailer.mp4', 'http://vjs.zencdn.net/v/oceans.mp4','./WeChat_20220225191029.mp4']
    var index = 0
    function fun2() {
        index = index == 4 ? 0 : index++
        document.getElementById('sou').src = list[index++]
        document.getElementById("vid").load();
        but.firstChild.setAttribute('class', 'glyphicon glyphicon-play')
        i = 0
        document.getElementById("vid").load();
    }

    video.addEventListener('ended', function () {
        but.firstChild.setAttribute('class', 'glyphicon glyphicon-play')
        i = 0
        document.getElementById("vid").load();
    }, false);


</script>

</html>